<template>
    <div>
        <div id="main"></div>
    </div>
</template>
<script>
import {goodsStatis} from "@/api/statis";
export default {
    name:'goods',
    data(){
        return{

        }
    },
     mounted(){
        let _self = this;
        let day = [];
        let orders = [];
        let products = [];
        let amount = [];
        goodsStatis().then(res=>{
            // console.log(res);
            if(res.errno==0){
                let arr = res.data.rows.filter((item,index)=>index<160)
                for(let item of arr){
                    day.push(item.day);
                    orders.push(item.orders);
                    products.push(item.customers);
                    amount.push(item.amount);
                }
                _self.echatFn1(day,orders,products,amount)
            }
        })
    },
    methods:{
        echatFn1(day,orders,products,amount){
            let _self = this;
            var chartDom = document.getElementById('main');
            var myChart = _self.$echarts.init(chartDom);
            var option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['订单量', '下单货物数量','下单商品总额']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data:day,
                        axisLine:{
		                    lineStyle:{
		                        color:'#0087ED',
		                        width:1,
		                    }
                        }
                    },
                    
                    yAxis: {
                        type: 'value',
                        axisLine:{
                            lineStyle:{
                                color:'#0087ED',
                                width:1,  
                            }
                        }
                    },
                    series: [
                        {
                        name: '订单量',
                        type: 'line',
                        smooth: true,
                        data: orders
                        },
                        {
                        name: '下单货物数量',
                        type: 'line',
                        smooth: true,
                        data: products
                        },
                        {
                        name: '下单商品总额',
                        type: 'line',
                        smooth: true,
                        data: amount
                        }
                    ]
            }
            option && myChart.setOption(option);
            window.addEventListener("resize", function(){
                myChart.resize();
            });

        },
    }
}
</script>
<style scoped>
#main{
    width: 100%;
    height: 400px;
    box-sizing: border-box;
    margin-top:20px;
    padding: 20px;
    /* box-shadow: 0px 0px 10px 3px rgb(167, 167, 167); */
    background-color: rgba(242,246,252,1);
    border-radius: 20px;
}
</style>